<template>
    <e-dialog
        :clickModal="false"
        :footer="!IS_PC"
        :width="IS_PC ? '80vw' : '95vw'"
        v-model="visable"
        :title="rowCopy._id ? '编辑' : '新增'"
        @closed="dialogClosed" 
        @confirm="save"
    >
        <div class="p-20">
            <e-form
                ref="ruleFormRef"
                :grid="IS_PC ? -1 : 0"
                :labelWidth="labelWidth" 
                :formConfig="formConfig"
                :formRule="rules"
                :formData="rowCopy"
            >
                <template slot="mavonEditor">
                    <mavonEditor
                        class="h-60vh"
                        upload_file_url="electric_charge"
                        v-model="rowCopy.charge_string"
                        @change="change"
                    ></mavonEditor>
                </template>
            </e-form>
        </div>
    </e-dialog>
</template>

<script>
export default {
    components: {
        mavonEditor: () => import('@/components/mavonEditor/index.vue'),
        'e-form': () => import('@/components/async/e-form.vue'),
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        rowInfo: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            rowCopy: {
                _id: '',
                charge_string: '',
                charge_html: '',
                charge_user_id: '',
                money: '',
                charge_date: '',
            },
            rules: {
                charge_user_id: [{ required: true, message: '请选择租客', trigger: 'change' }],
                money: [
                    {required: true, message: '请输入金额', trigger: 'change' },
                    {
                        validator: (rule, value, callback) => {
                            if (value && (value < 0.01 || value > 99999999.99)) {
                                callback(new Error('金额范围 0.01-99999999.99'))
                            } else {
                                callback()
                            }
                        },
                    },
                ],
                charge_date: [{ required: true, message: '请选择缴费日期', trigger: 'change' }],
            },
            formConfig: [
                // 分析类型
                {
                    label: '租客',
                    type: 'select',
                    modelName: 'charge_user_id',
                    className: 'w-300',
                    options: [],
                },
                {
                    label: '金额',
                    type: 'inputNumber',
                    modelName: 'money',
                    className: 'w-300',
                    min: 0.1,
                    max: 1000,
                    precision: 1,
                },
                {
                    label: '缴费日期',
                    type: 'datePicker',
                    isNeedTime: true,
                    modelName: 'charge_date',
                    className: 'w-300',
                    valueFormat: '',
                    format: '',
                },
                {
                    label: '补充',
                    type: 'customInput',
                    slot: 'mavonEditor',
                    grid: -1,
                    show: () => {
                        return this.IS_PC
                    },
                },
            ],
        }
    },
    computed: {
        ...Vuex.mapGetters(['allTenants']),
        visable: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },

        options() {
            const allUsers = this.allTenants.map((item) => item.label)
            const allData = [0, 0, 0, 0]
            this.list.forEach((item) => {
                let { charge_user_id, money } = item
                this.allTenants.find((itey, index) => {
                    if (charge_user_id === itey.value) {
                        allData[index] += money
                        return true
                    }
                })
            })
            return {
                title: {
                    text: '租房电费统计图（总）',
                    textStyle: {
                        align: 'center',
                        color: '#fff',
                        fontSize: 20,
                    },
                    top: '3%',
                    left: '10%',
                },
                backgroundColor: '#0f375f',
                grid: {
                    top: '25%',
                    bottom: '10%', //也可设置left和right设置距离来控制图表的大小
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            show: true,
                        },
                    },
                },
                legend: {
                    top: '15%',
                    textStyle: {
                        color: '#ffffff',
                    },
                },
                xAxis: {
                    data: allUsers,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#01FCE3',
                        },
                    },
                    axisTick: {
                        show: true, //隐藏X轴刻度
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#ebf8ac', //X轴文字颜色
                        },
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '元',
                        nameTextStyle: {
                            color: '#ebf8ac',
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#FFFFFF',
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#ebf8ac',
                            },
                        },
                    },

                    {
                        type: 'value',
                        gridIndex: 0,
                        min: 50,
                        max: 100,
                        splitNumber: 8,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '缴纳金额',
                        type: 'bar',
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#369258',
                                        fontSize: 14,
                                    },
                                },
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#00FFE3',
                                    },
                                    {
                                        offset: 1,
                                        color: '#4693EC',
                                    },
                                ]),
                            },
                        },
                        data: allData,
                    },
                ],
            }
        },
        IS_PC() {
            return this.isPc()
        },
        labelWidth() {
            return this.IS_PC ? '115px' : '80px'
        },
    },
    created() {
        this.formConfig[0].options = this.allTenants
        this.init()
    },

    methods: {
        change({ str: charge_string = '', html: charge_html = '' } = {}) {
            Object.assign(this.rowCopy, {
                charge_string,
                charge_html,
            })
        },
        async save() {
            const v = await this.$refs.ruleFormRef.validateFn().catch(() => {
                return false
            })
            if (v === false) return

            const params = this.deepCopy(this.rowCopy)
            if (!params._id) {
                delete params._id
            }

            const { charge_date } = params
            if (charge_date) {
                params.charge_date = new Date(charge_date).getTime()
            }

            this.$apis
                .post_electric_charge(params)
                .then(async (res) => {
                    this.$message.success(res.msg || '操作成功')
                    this.$emit('init', -1)
                    this.$emit('input', false)
                    this.$emit('submit', params, res)
                })
                .catch((err) => {
                    this.Toast(err)
                })
        },
        dialogClosed() {
            this.visable = false
            Object.assign(this.rowCopy, {
                _id: '',
                charge_string: '',
                charge_html: '',
                charge_user_id: '',
                money: '',
                charge_date: '',
            })
        },
        init() {
            Object.assign(this.rowCopy, this.rowInfo)
        },
    },
}
</script>

<style lang="scss" scoped></style>
